<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入住管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="/dangxia/css/font.css">
    <link rel="stylesheet" href="/dangxia/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/dangxia/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/dangxia/js/xadmin.js"></script>
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id="usebar">
    <div class="layui-inline">
        <label class="layui-form-label">房间号：</label>
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入房间号" id="roomNum"
                   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">房间容量：</label>
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入房间容量" id="roomSize"
                   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-input-inline">
        <a class="layui-btn search_btn" id="selectRoom">查询</a>
    </div>
    <div class="layui-input-inline" style="float:right;margin-left:20px">
        <button class="layui-btn" id="uploadExcel"><i class="layui-icon">&#xe67c;</i>批量入住</button>
    </div>
    <div class="layui-input-inline" style="float:right">
        <a class="layui-btn" id="downloadExcel" href="/dangxia/excel/student.xlsx" download="student.xlsx"><i class="layui-icon">&#xe601;</i>下载模板</a>
    </div>
    <xblock>
        <button class="layui-btn" id="man"><i class="layui-icon">&#xe662;</i>男</button>
        <button class="layui-btn layui-btn-danger" id="woman"><i class="layui-icon">&#xe661;</i>女</button>
        <button class="layui-btn  layui-btn-normal" id="emptyRoom"><i class="layui-icon">&#xe63f;</i>空房间</button>
        <span class="x-right" style="line-height:40px">共有数据：88 条</span>
    </xblock>
    <table id="rooms" lay-filter="test"></table>
    <div id="laypage"></div>
</div>

<!--模板开始-->
<script type="text/html" id="roomTpl">
    {{#  if(d.roomType==0){ }}
    女
    {{#  } else if(d.roomType==1){ }}
    男
    {{#  }else{ }}
    空房间
    {{# }  }}
</script>

<script type="text/html" id="insertStuBar">
    <a class="layui-btn layui-btn-sm" lay-event="detail">入住办理</a>
</script>

<script type="text/html" id="bedNumTpl">
    <option value="0">请选择床位</option>
    {{# layui.each(d,function(index,item){  }}

    <option value="{{item.id}}">{{item.bedNum}}</option>
    {{# }); }}
</script>
<!--模板结束-->
<script>
    layui.use(['table', 'layer', 'laytpl', 'form','laydate','upload'], function () {
        var table = layui.table;
        var laytpl = layui.laytpl;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;

        //第一个实例
        table.render({
            elem: '#rooms'
            , height: 412
            , id: 'idTest'
            ,toolbar: '#toolbarDemo'
            , url: '/dangxia/checkin/getAllMsg' //数据接口
            , page: true //开启分页
            , limits: [5, 10, 15, 20]
            , limit: 5
            , cols: [
                [ //表头
                    {field: 'roomNo', title: '房间号', sort: true, fixed: 'left'}
                    , {field: 'roomType', title: '房间类型', templet: '#roomTpl'}
                    , {field: 'roomSize', title: '房间容量'}
                    , {field: 'peopleNum', title: '房间已住人数'}
                    , {field: 'ableNum', title: '房间可住人数',templet:function(d){return '<span style="color:red">'+d.ableNum+'</span>'}}
                    , {field: 'areaName', title: '小区名'}
                    , {field: 'buildingName', title: '楼栋名'}
                    , {field: 'score', title: '操作', fixed: 'right', toolbar: '#insertStuBar'}
                ]
            ],
            done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                $(".x-right").html("共有数据：" + count + "条");
            }

        });

        //模糊搜索  提交 点击事件 发送数据
        $(document).on('click', '#selectRoom', function () {
            var roomNo = $("#roomNum").val();
            var roomSize = $("#roomSize").val();
            table.reload('idTest', {
                url: '/dangxia/checkin/getAllMsg',
                method: 'post',
                where: { //设定异步数据接口的额外参数，任意设
                    roomNo: roomNo,
                    roomSize: roomSize
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });

        //查询男生宿舍
        $(document).on('click', '#man', function () {
            table.reload('idTest', {
                url: '/dangxia/checkin/getAllMsg',
                method: 'post',
                where: { //设定异步数据接口的额外参数，任意设
                    roomType: 1
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });
        //查询女生宿舍
        $(document).on('click', '#woman', function () {
            table.reload('idTest', {
                url: '/dangxia/checkin/getAllMsg',
                method: 'post',
                where: { //设定异步数据接口的额外参数，任意设
                    roomType: 0
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });
        //查询空宿舍
        $(document).on('click', '#emptyRoom', function () {
            table.reload('idTest', {
                url: '/dangxia/checkin/getAllMsg',
                method: 'post',
                where: { //设定异步数据接口的额外参数，任意设
                    roomType: 2
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });

        //日期时间选择器,选择免租到期时间
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
            ,min:0
        });

        //入住办理弹框
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //办理入住弹框输入性别要和选择房间性别一致
            if(data.roomType==0){
                $("#manSex").attr("disabled","disabled");
                $("#womanSex").attr("checked","true");
            }
            if(data.roomType==1){
                $("#womanSex").attr("disabled","disabled");
                $("#manSex").attr("checked","true");
            }
            $("#rid").val(data.id);
            $("#rtyp").val(data.roomType);
            $("#area").val(data.areaName);
            $("#building").val(data.buildingName);
            if (layEvent === 'detail') {
                //渲染弹出层选择床位下拉框
                $.post("/dangxia/checkin/getEmptyBed", {
                    id: data.id
                }, function (data) {
                    //select下拉选项动态加载
                    var demo = $("#bedNumTpl");
                    var getTpl = demo.html();//模板
                    var view = $("#view");
                    laytpl(getTpl).render(data, function (html) {
                        view.html(html);
                    });
                    form.render();
                });

                /*
                * 1.在手机端注册个人信息，不在手机端申请入住，去后台管理员哪里办理入住
                * 2.手机端申请入住，正在审核中，又去后台办理入住。审核模块已经进行了判断，这里直接办理入住，执行操作
                * 3.免租几个月的，入住一段时间，中间办理退宿，一段时间后又再次办理入住
                * 4.按月缴费的，入住一段时间，中间办理退宿，一段时间后又再次办理入住 操作同1
                * */
                //入住办理弹出层，输入手机,判断数据库是否有该账户
               var myfunction = $("#myphone").blur(function(){
                    var myphone = $("#myphone").val();
                    $.post("/dangxia/checkin/checkPhone",{
                        myphone:myphone
                    },function (data) {
                        //使提交按钮可点击
                        $("#mybtn").attr("disabled",false);
                       if(data.msg=="该用户已注册 未办理入住"){
                           $("#myspan").html(data.msg);
                           $("#myspan").css({color:"red"});
                           //往办理入住申请弹框里面自动填充用户信息
                            $("#myusername").val(data.data.name);
                            $("#myuserAddr").val(data.data.userAddr);
                            $("#myuserCard").val(data.data.userCard);
                            $("#mypayphone").val(data.data.payphone);
                       }else if(data.msg=="该用户为回归用户"){
                           $("#myspan").html(data.msg);
                           $("#myspan").css({color:"blue"});
                       }else if(data.msg=="该用户未被注册"){
                           $("#myspan").html(data.msg);
                           $("#myspan").css({color:"green"});
                       }else if(data.msg=="请输入手机号"){
                           $("#myspan").html(data.msg);
                           $("#myspan").css({color:"orange"});
                       }else if(data.msg=="该用户已注册 并且已经办理入住"){
                           $("#myspan").html("警告！"+data.msg);
                           $("#myspan").css({color:"red"});
                           //使提交按钮不可点击
                           $("#mybtn").attr("disabled","disabled");
                       }


                    });

                });
                //入住办理弹出层
                layer.open({
                    title: "入住办理",
                    type: 1,
                    content: $('#insertStuLayer'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    area: ['600px', '700px'],
                    end: function () {
                        location.reload();
                    }
                });

            } else if (layEvent === 'del') { //删除
                //do somehing
            }
        });

        //监听入住办理弹框提交事件 发送ajax请求
        form.on('submit(demo1)', function (data) {
            var roomid = data.field.roomid;
            var roomtype = data.field.roomtype;
            var phone = data.field.phone;
            var name = data.field.name;
            var userAddr = data.field.userAddr;
            var userSex = data.field.userSex;
            var userCard = data.field.userCard;
            var payphone = data.field.payphone;
            var deposit = data.field.deposit;
            var roomUserBedId = data.field.roomUserBedId;
            var payType = data.field.payType;
            var endTime = data.field.endTime;
            var cload = layer.load(1,{
                shade:[0.3,'#000'],
                time:5000
            });
            $.post("/dangxia/checkin/addStuUser", {
                roomid:roomid,
                roomtype:roomtype,
                phone:phone,
                name:name,
                userAddr:userAddr,
                userSex:userSex,
                userCard:userCard,
                payphone:payphone,
                deposit:deposit,
                roomUserBedId:roomUserBedId,
                payType:payType,
                endTime:endTime
            }, function (data) {
                if (data.code == 0) {
                    //end - 层销毁后触发的回调layer.closeAll()疯狂模式，关闭所有层
                    layer.msg(data.msg, {time: 1000, icon: 6,end:function() {
                        $("#checkinForm")[0].reset();
                        layer.closeAll();
                        }});
                    layer.close(cload);

                } else {
                    layer.msg(data.msg, {time: 1000, icon: 5});
                    layer.close(cload);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听选择交租方式下拉框 当选择免租时才显示选择日期弹框
        form.on('select(payTye)', function(data){
            if(data.value==1){
               $("#mydate").css("display","block");
               $("#test5").attr("lay-verify","required");
            }else{
                $("#mydate").css("display","none");
                $("#test5").attr("lay-verify","");
            }

        });

        //批量导入 excel
        upload.render({
            elem: '#uploadExcel' //绑定元素
            ,url: '/dangxia/checkin/uploadExcel' //上传接口
            ,accept:'file'
            ,method: 'post'
            ,exts: 'xls|xlsx'//只允许上传excel文件
            , before: function (obj) {
                layer.load(); //上传loading
            }
            ,done: function(res){
                layer.msg(res.msg,{  icon: 1,
                    time: 3000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    // 刷新本页面
                    location.reload();
                    //上传完毕回调
                });

            }
            ,error: function(res){
                layer.msg(res.msg);
                //请求异常回调
            }
        });


    });

</script>
</body>

<div id="insertStuLayer" style="display: none">
    <form class="layui-form" lay-verify="myform" id="checkinForm">
        <div style="display: none">
            <input id="rid" name="roomid">
            <input id="rtyp" name="roomtype">
        </div>
        <div class="layui-form-item">

            <label class="layui-form-label"><span class="x-red">*</span>手机号</label>
            <div class="layui-input-inline">
                <input id="myphone" type="text" name="phone" lay-verify="required|phone|number" placeholder="请输入手机号"
                       autocomplete="off" class="layui-input">
            </div>
            <div style="text-align: center"><span id="myspan"></span></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>姓名</label>
            <div class="layui-input-inline">
                <input id="myusername" type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>地址</label>
            <div class="layui-input-block">
                <input id="myuserAddr" type="text" name="userAddr" lay-verify="required" placeholder="请输入地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input id="manSex" type="radio" name="userSex" value="1" title="男">
                <input id="womanSex" type="radio" name="userSex" value="0" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>身份证</label>
            <div class="layui-input-inline">
                <input id="myuserCard" type="text" name="userCard" lay-verify="required|number|identity" placeholder="请输入身份证"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>支付宝账号</label>
            <div class="layui-input-inline">
                <input id="mypayphone" type="text" name="payphone" lay-verify="required|number" placeholder="请输入支付宝账号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>住房押金</label>
            <div class="layui-input-inline">
                <input type="text" name="deposit" lay-verify="required|number" placeholder="请输入住房押金" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>选择床位</label>
            <div class="layui-input-inline">
                <select id="view" name="roomUserBedId" lay-verify="required">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>交租方式</label>
            <div class="layui-input-inline">
                <select name="payType" lay-filter="payTye">
                    <!--<option value="">请选择</option>-->
                    <option value="0">按月交租</option>
                    <option value="1">免租</option>
                    <option value="2" disabled>其它</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="mydate" style="display: none">
            <label class="layui-form-label"><span class="x-red">*</span>到期时间</label>
            <div class="layui-input-inline">
                <input id="test5" type="text" name="endTime" placeholder="请输入免租到期时间" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="mybtn" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</html>